<template>
  <div class="div-container">
    <div class="box-container">
        <div class="box-class">
            <div>物料</div>
            <div class="res-font"  v-if="radarRealData!=undefined&&radarRealData!=null">{{radarRealData[chooseIndex].siloMaterial}}</div>
        </div> 
        <div class="box-class">
            <div>密度</div>
            <div class="res-font" v-if="radarRealData!=undefined&&radarRealData!=null">{{Number(radarRealData[chooseIndex].siloDensity).toFixed(2)}}t/m³</div>
        </div> 
        <div class="box-class" style="width: 33.3%;">
            <div>体积</div>
            <div class="res-font" v-if="radarRealData!=undefined&&radarRealData!=null">{{Number(radarRealData[chooseIndex].linerVol).toFixed(2)}}m³</div>
        </div> 
        <div class="box-class" style="width: 33.3%;">
            <div>重量</div>
            <div class="res-font" v-if="radarRealData!=undefined&&radarRealData!=null">{{Number(radarRealData[chooseIndex].linerWeigh).toFixed(2)}}t</div>
        </div> 
        <div class="box-class" style="width: 33.3%;">
            <div>容比</div>
            <div class="res-font" v-if="radarRealData!=undefined&&radarRealData!=null">{{Number(radarRealData[chooseIndex].perLevel).toFixed(2)}}%</div>
        </div> 
    </div>
    <div ref="heightChart" class="height-chart"></div>
  </div>
</template>

<script>

import * as echarts from "echarts";

export default {
    props:['radarRealData','chooseIndex','minZ'],
    data(){
        return{
            xData : ['最高物位', '平均物位','最低物位'],
            yData : [],
            series:[],
            option:undefined,
        }
    },
    mounted(){
        
    },
    beforeDestroy(){
        if(this.heightChart){
            this.heightChart.dispose();
            this.heightChart = null;
        }
    },
    watch:{
        radarRealData:{
            deep:true,
            handler(newValue){
                if(!this.radarRealData) return;
                
                this.initChart();
            }
        },
        // minZ:{
        //     handler(newValue){
                
        //     }
        // }
    },
    methods:{
        initChart(){
            // this.minZ = Number(this.minZ)
            this.yData = [(this.radarRealData[this.chooseIndex].linerMax-this.minZ).toFixed(2),
            (this.radarRealData[this.chooseIndex].linerLev-this.minZ).toFixed(2),
            (this.radarRealData[this.chooseIndex].linerMin-this.minZ).toFixed(2)]

            if(this.heightChart){
                this.series[0].data = this.yData
                this.option.series = this.series
            }else{
                this.series.push({
                    name: '物位',
                    type: 'bar',
                    barWidth: '30%',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 30,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#00feff'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#027eff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#0286ff'
                                    }
                                ]
                            )
                        }
                    },
                    data: this.yData,
                    zlevel: 11
                })
                this.option = {
                    // backgroundColor:"#111c4e",
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line',
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        formatter: function(prams) {
                            return  prams[0].name + prams[0].data + "m"
                        }
                    },
                    legend: {
                        data: ['物位'],
                        show: false
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '1%',
                        top: '7%',
                        height: '90%',
                        containLabel: true,
                        z: 22
                    },
                    xAxis: [{
                        type: 'category',
                        // gridIndex: 0,
                        data: this.xData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0c3b71'
                            }
                        },
                        axisLabel: {
                            show: true,
                            // color: 'rgb(170,170,170)',
                            color: 'rgb(255,255,255)',
                            fontSize:12
                        }
                    }],
                    yAxis: [{
                            type: 'value',
                            // gridIndex: 0,
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            // min: min,
                            // max: 100,
                            axisLine: {
                                lineStyle: {
                                    color: '#0c3b71'
                                }
                            },
                            axisLabel: {
                                // color: 'rgb(170,170,170)',
                                color: 'rgb(255,255,255)',
                                formatter: '{value} m',
                                fontSize:12
                            }
                        },
                        // {
                        //     type: 'value',
                        //     gridIndex: 0,
                        //     // min: min,
                        //     // max: 100,
                        //     splitNumber: 12,
                        //     splitLine: {
                        //         show: false
                        //     },
                        //     axisLine: {
                        //         show: false
                        //     },
                        //     axisTick: {
                        //         show: false
                        //     },
                        //     axisLabel: {
                        //         show: false
                        //     },
                        //     splitArea: {
                        //         show: true,
                        //         areaStyle: {
                        //             color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                        //         }
                        //     }
                        // }
                    ],
                    series: this.series,
                };
                this.heightChart = echarts.init(this.$refs.heightChart);
            }
            this.heightChart.setOption(this.option,true);
        },
        heightChartResize(){
            if(this.heightChart) {
                this.heightChart.resize()
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.div-container{
    // margin-left: 20px;
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 16px;
    padding: 10px;
}
.box-container{
    width:100%;
    height: 100px;
}
.box-class{
    float: left;
    width: 50%;
    height: 50px;
    line-height: 20px;
    text-align: center;
    // display: flex;
    // align-items: center;
    // justify-content: start;
}
.res-font{
    font-weight: 700;
}
.height-chart{
    float: left;
    height: calc(100% - 100px);
    width:100%;
}
</style>